<template>
  <div class="singer">
    <IscrollView ref="iscrollViews">
      <ul class="list-wrapper" >
        <li class="list-group" v-for="(value, index) in list" :key="index" ref="group">
          <h2 class="group-title">{{keys[index]}}</h2>
          <ul>
            <li class="group-item" v-for="obj in list[index]" :key="obj.id" @click="switchSinger(obj.id)">
              <img v-lazy="obj.img1v1Url" alt="">
              <p>{{obj.name}}</p>
            </li>
          </ul>
        </li>
      </ul>
    </IscrollView>
    <ul class="list-keys">
      <li v-for="(key,index) in keys" :key="key"
          :class="{'active':currentIndex===index}"
          :data-index="index"
          @touchstart.stop.prevent="touchstart"
          @touchmove.stop.prevent="touchmove"
      >{{key}}</li>
    </ul>
    <div class="fixd-title" v-show="fixdTitle !== ''">{{fixdTitle}}</div>
    <transition>
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
// import { getHotArtist } from '../api'
// import { getLetterArtist } from '../api'
import { getLetterAll } from '../api'
import IscrollView from '../components/IscrollView'
export default {
  name: 'Singer',
  components: {
    IscrollView
  },
  methods: {
    go (index) {
      this.currentIndex = index
      const offsetY = this.groupTop[index]
      this.$refs.iscrollViews.move(0, -offsetY)
    },
    touchstart (e) {
      // console.log(e.target.dataset.index)
      const index = e.target.dataset.index
      this.go(index)
      // touches[0]:代表拿到第0个手指
      this.beginoffset = e.touches[0].pageY
    },
    touchmove (e) {
      this.endoffset = e.touches[0].pageY
      const offsetY = (this.endoffset - this.beginoffset) / e.target.offsetHeight
      let index = parseInt(e.target.dataset.index) + Math.floor(offsetY)
      if (index < 0) {
        index = 0
      } else if (index > this.keys.length - 1) {
        index = this.keys.length - 1
      }
      this.go(index)
    },
    switchSinger (id) {
      this.$router.push(`singer/detile/${id}/singer`)
    }
  },
  created () {
    getLetterAll()
      .then((result) => {
        // console.log(result)
        this.keys = result.key
        this.list = result.list
      })
      .catch(function (err) {
        console.log(err)
      })
  },
  computed: {
    fixdTitle () {
      if (this.scrollY >= 0) {
        return ''
      } else {
        return this.keys[this.currentIndex]
      }
    }
  },
  data () {
    return {
      keys: [],
      list: [],
      groupTop: [],
      currentIndex: 0,
      beginoffset: 0,
      endoffset: 0,
      scrollY: 0
    }
  },
  watch: {
    list () {
      // this.$nextTick等待数据加载完成之后,在去获取
      this.$nextTick(() => {
        // console.log(this.$refs.group)
        this.$refs.group.forEach((item) => {
          this.groupTop.push(item.offsetTop)
        })
        // console.log(this.groupTop)
      })
    }
  },
  mounted () {
    this.$refs.iscrollViews.scrolling((y) => {
      this.scrollY = y
      if (y >= 0) {
        this.currentIndex = 0
        return
      }
      for (let i = 0; i < this.groupTop.length - 1; i++) {
        const pre = this.groupTop[i]
        const nex = this.groupTop[i + 1]
        if (-y >= pre && -y <= nex) {
          this.currentIndex = i
          return
        }
        this.currentIndex = this.groupTop[this.groupTop.length - 1]
      }
    })
  }
}
</script>

<style scoped lang="scss">
  @import "../assets/css/mixin";
  @import "../assets/css/variable";
.singer{
  position: fixed;
  top: 184px;
  right: 0;
  bottom: 0;
  left: 0;
  @include bg_sub_color();
  overflow: hidden;
  .list-wrapper{
    .list-group{
      .group-title{
        @include bg_color();
        @include font_size($font_medium);
        color: #fff;
        padding: 10px 20px;
        box-sizing: border-box;
      }
      ul{
        .group-item{
          display: flex;
          justify-content: flex-start;
          align-items: center;
          border-bottom:1px solid #fff;
          padding: 10px 20px;
          img{
            width: 100px;
            height: 100px;
            /*border: 1px solid #000;*/
            border-radius: 50%;
          }
          p{
            @include font_size($font_medium);
            @include font_color();
            margin-left: 20px;
          }
        }
      }
    }
  }
  .list-keys{
    position: fixed;
    top: 60%;
    right: 10px;
    transform: translateY(-50%);
    li{
      @include font_color();
      @include font_size($font_medium_s);
      padding: 3px 0;
      &.active{
        text-shadow: 0 0 10px #000;
      }
    }
  }
  .fixd-title{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    @include bg_color();
    @include font_size($font_medium);
    color: #fff;
    padding: 10px 20px;
    box-sizing: border-box;
  }
}
  .v-enter{
    transform: translateX(100%);
  }
  .v-enter-to{
    transform: translateX( 0%);

  }
  .v-enter-active{
    transition: transform 1s;
  }
  .v-leave{
    transform: translateX( 0%);
  }
  .v-leave-to{
    transform: translateX( 100%);
  }
  .v-leave-active{
    transition: transform 1s;
  }
</style>
